<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    {% include 'common/echart_base.html' %}
    <title>Echart_Custom实例</title>
    <script type="text/javascript">
        $(document).ready(function () {
            /*
            var data = [[10, 16, 3, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']];
            var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];

            data = echarts.util.map(data, function (item, index) {
                return {
                    value: item,
                    itemStyle: {
                        normal: {
                            color: colorList[index]
                        }
                    }
                };
            });
            */
            var data=[{
                "value": [10, 16, 3, "A"],
                "itemStyle": {
                    "normal": {
                        "color": "#4f81bd"
                    }
                }
            }, {
                "value": [16, 18, 15, "B"],
                "itemStyle": {
                    "normal": {
                        "color": "#c0504d"
                    }
                }
            }, {
                "value": [18, 26, 12, "C"],
                "itemStyle": {
                    "normal": {
                        "color": "#9bbb59"
                    }
                }
            }, {
                "value": [26, 32, 22, "D"],
                "itemStyle": {
                    "normal": {
                        "color": "#604a7b"
                    }
                }
            }, {
                "value": [32, 56, 7, "E"],
                "itemStyle": {
                    "normal": {
                        "color": "#948a54"
                    }
                }
            }, {
                "value": [56, 62, 17, "F"],
                "itemStyle": {
                    "normal": {
                        "color": "#e46c0b"
                    }
                }
            }];

            function renderItem(params, api) {
                var yValue = api.value(2);
                var start = api.coord([api.value(0), yValue]);
                var size = api.size([api.value(1) - api.value(0), yValue]);
                var style = api.style();

                return {
                    type: 'rect',
                    shape: {
                        x: start[0],
                        y: start[1],
                        width: size[0],
                        height: size[1]
                    },
                    style: style
                };
            }

            console.log(JSON.stringify(data));

            option = {
                title: {
                    text: 'Profit',
                    left: 'center'
                },
                tooltip: {
                },
                xAxis: {
                    scale: true
                },
                yAxis: {
                },
                series: [{
                    type: 'custom',
                    renderItem: renderItem,
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    dimensions: ['from', 'to', 'profit'],
                    encode: {
                        x: [0, 1],
                        y: 2,
                        tooltip: [0, 1, 2],
                        itemName: 3
                    },
                    data: data
                }]
            };

            myChart=echarts.init(document.getElementById('echart_custom'));
            myChart.setOption(option);
            
        })
    </script>

</head>
<body>

<div id="echart_custom" style="width: 700px;height: 600px; margin: 0 auto;background-color: rgba(116,50,92,0.7);"></div>
</body>
</html>